{extend name='base_html/base'/}
{block name="style"}
<style>
    .wrapper {
        width: 750px;
        height: 1024px;
        margin: auto;
        position: relative;
    }

    .container {
        position: absolute;
        height: 360px;
        width: 100%;
        max-width: 100%;
        top: 0;
        overflow: hidden;
        z-index: 1;
        pointer-events: none;

    }

    .animation {
        display: block;
        position: absolute;
        z-index: 1;
        top:0;
        right: 0;
        bottom: 0;
        left: 0;
        pointer-events: none;
        animation:test1 linear infinite;
        -webkit-transform: translate3d(0, -100%, 0);
        -moz-transform: translate3d(0, -100%, 0);
        -ms-transform: translate3d(0, -100%, 0);
        -o-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    .middleground {
        -webkit-animation-duration: 35s;
        -moz-animation-duration: 35s;
        -o-animation-duration: 35s;
        animation-duration: 35s;
        background-image: url(//cdn.quickbass.com/static/o2o/h5/bargain_pay/img/firecracker1.6555496.png);
    }

    .foreground {
        -webkit-animation-duration: 55s;
        -moz-animation-duration: 55s;
        -o-animation-duration: 55s;
        animation-duration: 55s;
        background-image: url(//cdn.quickbass.com/static/o2o/h5/bargain_pay/img/firecracker2.1a88a61.png);
    }

    .layered {
        -webkit-animation-delay: 26s;
        -moz-animation-delay: 26s;
        -o-animation-delay: 26s;
        animation-delay: 26s;
    }

    @keyframes test1 {
        0% {
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
        }
        100% {
            -webkit-transform: translate3d(15%, 100%, 0);
            transform: translate3d(15%, 100%, 0);
        }
    }
    @-webkit-keyframes test1 {
        0% {
            -webkit-transform: translate3d(0, -100%, 0);
        }
        100% {
            -webkit-transform: translate3d(15%, 100%, 0);
        }
    }
</style>
{/block}
{block name="main"}
<div class="wrapper">
    <div class="container">
        <div class="animation foreground"></div>
        <div class="animation foreground layered"></div>
        <div class="animation middleground"></div>
        <div class="animation middleground layered"></div>
    </div>
</div>

{/block}